<template>
    <IDrawer v-model="defaultValue" :loading="loading">
        <Form :model="data" :rules="ruleValidate" ref="formCreate" label-position="top">
            <Row :gutter="12">
                <Col :span="8">
                    <FormItem label="产品SKU" prop="sku">
                        <Input v-model="data.sku"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="默认条码" prop="barcode">
                        <Input v-model="data.barcode"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="产品名称" prop="name">
                        <Input v-model="data.name"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="产品净重" prop="net_weight">
                        <Input v-model="data.net_weight" number></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="产品毛重" prop="weight">
                        <Input v-model="data.weight" number></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="品牌" prop="brand">
                        <Input v-model="data.brand"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="商品编码" prop="hs_code">
                        <SearchSelect v-model="data.hs_code" url="common/select/hs_code" show-code
                                      @on-change="hsCodeChange"></SearchSelect>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="原产国" prop="country">
                        <RemoteSelect url="common/select/country" show-code v-model="data.country"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="申报单位" prop="unit">
                        <RemoteSelect url="common/select/unit" show-code v-model="data.unit"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="申报币种" prop="currency">
                        <RemoteSelect url="common/select/currency" show-code v-model="data.currency"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="型号" prop="model">
                        <Input v-model="data.model"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="规格" prop="specs">
                        <Input v-model="data.specs"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="功能" prop="function">
                        <Input v-model="data.function"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="用途" prop="use">
                        <Input v-model="data.use"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="成分" prop="ingredient">
                        <Input v-model="data.ingredient"></Input>
                    </FormItem>
                </Col>

                <Col :span="8" v-if="Boolean(hsCodeItem.unit1)">
                    <FormItem prop="qy1" :rules="[{required: true,type: 'number', message: '法定数量必须填写'}]">
                        <template slot="label">法定数量(
                            <RemoteSpan url="common/select/unit" v-model="hsCodeItem.unit1"
                                        style="color: red;"></RemoteSpan>
                            )
                        </template>
                        <Input v-model="data.qy1" number></Input>
                    </FormItem>
                </Col>
                <Col :span="8" v-if="Boolean(hsCodeItem.unit2)">
                    <FormItem prop="qy2" :rules="[{required: true,type: 'number', message: '法定数量必须填写'}]">
                        <template slot="label">法定数量(
                            <RemoteSpan url="common/select/unit" v-model="hsCodeItem.unit2"
                                        style="color: red;"></RemoteSpan>
                            )
                        </template>
                        <Input v-model="data.qy2" number></Input>
                    </FormItem>
                </Col>
                <Col :span="24" v-if="Boolean(hsCodeItem.element)">
                    <FormItem label="申报要素" prop="element" >
                        <Input v-model="data.element">
                            <Button slot="append" icon="md-barcode" @click="elementModal = true"></Button>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
            <FormItem label="产品图片" prop="images">
                <UploadImages url="common/index/upload" v-model="data.images"></UploadImages>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>
        <IElement v-if="elementModal" v-model="elementModal" :props="hsCodeItem" :element="data.element"
                  @on-input="(v) => data.element = v"></IElement>
    </IDrawer>
</template>

<script>


    import IDrawer from "../../../../components/layout/IDrawer";
    import IDrawerMixins from "../../../../mixins/iDrawerMixins";
    import IData from './data';
    import IElement from './element';
    import RemoteSelect from "../../../../components/form/remoteSelect";
    import ItemCol from "../../../../components/layout/ItemCol";
    import UploadImages from "../../../../components/form/uploadImages";
    import SearchSelect from "../../../../components/form/searchSelect";
    import RemoteSpan from "../../../../components/layout/RemoteSpan";

    export default {
        name: "create",
        components: {RemoteSpan, SearchSelect, UploadImages, ItemCol, RemoteSelect, IDrawer, IElement},
        mixins: [IDrawerMixins, IData],
        methods: {
            submit(name){
                this.validate(name).then(() => {
                    this.loading = true;
                    this.$http.post(`product/index`, this.data).then((res) => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
